<script lang="ts" setup>
import type { HistoryReportType } from '@/types/histroyReport'

import { getMatchHistoryApi } from '@/api/client/matchApi'
import HistoryDetail from '@/components/historyRecord/detailDialog.vue';
import HistoryPreview from '@/components/historyRecord/preview.vue';
import HistoryReport from '@/LcuApi/historyReport'
import { defineEmits, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import HistoryFilter from './historyFilter.vue';

const emit = defineEmits(['report'])
const { t } = useI18n()

const HistoryDetailDialog = ref(null)

// 加载效果
const loading = ref(false)
const puuid = ref('')
// 由于不确定总数，所以手动分页
const page = ref(1)
const pageSize = ref(20)
const notMore = ref(false)
const filter = ref({})

// 获取历史战绩
const matchHistory = ref([])

// 获取历史战绩(第一页)
async function getHistoryData(id) {
  puuid.value = id
  page.value = 1
  await getMatchHistory()
}

// 获取历史战绩
async function getMatchHistory() {
  loading.value = true
  const params = {
    begIndex: (page.value - 1) * pageSize.value,
    endIndex: page.value * pageSize.value - 1,
  }
  const res = await getMatchHistoryApi(puuid.value, params)
  loading.value = false
  const arr = res?.games?.games ?? []
  // 判断是否到末页
  if (arr.length < pageSize.value || arr.length === 0) {
    notMore.value = true
  } else {
    notMore.value = false
  }
  matchHistory.value = arr
  const report: HistoryReportType = HistoryReport.getUserReport(arr)
  emit('report', report)
}

// 分页
function pageChange(num) {
  if (loading.value) return
  if (num === 1) {
    if (notMore.value) return
    page.value++
  } else if (num === -1) {
    if (page.value === 1) return
    page.value--
  }
  getMatchHistory()
}

// 暴露方法
defineExpose({ getHistoryData })

function detail(row) {
  HistoryDetailDialog.value.init(row);
}

function filterChange(params) {
  filter.value = params
  getMatchHistory()
}
</script>

<template>
  <div class="user_history flex flex-col h-full">
    <div class="user_history_header flex items-center text-#7D7D88 font-bold h-32px px-20px">
      <div class="header_title text-15px">{{ t(`History.title`) }}</div>
      <a-popover position="bl" trigger="click" content-class="">
        <div class="header_filter cursor-pointer ml-8px">
          <icon-filter />
        </div>
        <template #content>
          <HistoryFilter @ok="filterChange" />
        </template>
      </a-popover>
    </div>
    <!-- 列表 -->
    <a-spin :loading="loading" dot class="user_history_main flex-grow-1 flex mt-15px relative">
      <a-scrollbar outer-class="h-full w-102% overflow-auto absolute" class="h-full overflow-auto pr-4%">
        <HistoryPreview v-for="item in matchHistory" :key="item" :data="item" @detail="detail" />
      </a-scrollbar>
    </a-spin>
    <!-- 分页 -->
    <div class="user_history_footer flex items-end h-32px px-20px">
      <div class="footer_page w-full flex items-center justify-center">
        <div class="page_item cursor-pointer" :disabled="page <= 1" @click="pageChange(-1)">
          <icon-left />
        </div>
        <div class="page_item cursor-pointer">{{ page }}</div>
        <div class="page_item cursor-pointer" :disabled="notMore" @click="pageChange(1)">
          <icon-right />
        </div>
      </div>
    </div>

    <HistoryDetail ref="HistoryDetailDialog" />
  </div>
</template>

<style lang="scss" scoped>
.user_history {
  .user_history_main {
    ::v-deep .history_preview {
      padding-left: 19px;
      padding-right: 13px;

      &+.history_preview {
        margin-top: 5px;
      }
    }
  }

  .user_history_footer {
    margin-top: 15px;

    .page_item {
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f599;
      border-radius: 6px;
      font-size: 14px;
      user-select: none;

      &[disabled=true] {
        opacity: 0.5;
        cursor: not-allowed;
      }

      &+.page_item {
        margin-left: 5px;
      }
    }
  }
}
</style>
